<template>
  <el-drawer
    size="700px"
    class="custom-drawer"
    :visible.sync="drawer"
    :direction="direction"
    :with-header="false"
  >
    <div class="title"><h3>评价</h3></div>
    <div class="body">
      <el-form
        ref="formRef"
        :model="ruleForm"
        :rules="rules"
        :disabled="!!scoreDetail"
        label-position="top"
        label-suffix=" :"
      >
        <el-form-item label="应用名称" prop="name">
          <el-input :value="subDetail.name" disabled />
        </el-form-item>
        <el-form-item label="应用星级" prop="score">
          <div class="f-r a-c" style="padding: 0 10px">
            <h4 style="margin: 0 10px 0 0">综合得分</h4>
            <el-rate :value="computeScore" allow-half disabled />
          </div>
          <div
            v-for="(item,index) in ruleForm.scoreItem"
            :key="index"
            class="f-r a-c"
            style="padding: 0 10px"
          >
            <h4 style="margin: 0 10px 0 0;font-weight: 400">{{ index + 1 }}、{{ item.question }}</h4>
            <el-rate v-model="item.score" allow-half />
          </div>
        </el-form-item>
      </el-form>
      <el-card class="title-card" shadow="none">
        <div slot="header" class="title-card-header">
          评价历史
        </div>
        <div class="table-box" style="margin-top: 20px">
          <el-table
            v-loading="loading"
            stripe
            size="mini"
            :data="tableData"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(255, 255, 255, 0.8)"
            @selection-change="onSelect"
          >
            <el-table-column prop="score" label="评分星级" align="center" />
            <el-table-column prop="createTime" label="评分时间" align="center" />
            <el-table-column prop="createName" label="评分人" align="center" />
          </el-table>
        </div>
        <div class="page-box">
          <el-pagination
            background
            :current-page="pageNo"
            :page-sizes="pageSizes"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalSize"
            @size-change="changePageSize"
            @current-change="changePageNo"
          />
        </div>
      </el-card>
      <div class="f-r a-c j-e" style="margin: 10px 0;">
        <el-button v-if="!scoreDetail" type="primary" @click="handleSubmit">保存</el-button>
        <el-button @click="handleClose">取消</el-button>
      </div>
    </div>
  </el-drawer>
</template>

<script>
import { http_serve_sub_app_evaluate } from '@/api'
import crud from '@/mixins/crud'
import { mapGetters } from 'vuex'

export default {
  name: 'ToolForm',
  mixins: [crud],
  computed: {
    ...mapGetters(['dict']),
    questionList() {
      return this.dict['evaluate_question'] || []
    },
    computeScore() {
      if (!this.ruleForm.scoreItem.length) return 0
      return (this.ruleForm.scoreItem.map(v => v.score).reduce((pre, next) => parseInt(pre) + parseInt(next)) / this.ruleForm.scoreItem.length)
    }
  },
  data() {
    return {
      request: http_serve_sub_app_evaluate,
      drawer: false,
      direction: 'rtl',
      ruleForm: {
        scoreItem: []
      },
      rules: {
      },
      // 评价详情
      scoreDetail: null,
      // 订阅详情
      subDetail: {}
    }
  },
  methods: {
    async open(subItem) {
      this.drawer = true
      this.subDetail = subItem
      const { id } = subItem
      const res = await http_serve_sub_app_evaluate.read({ subId: id })
      this.scoreDetail = res
      // 不可评价 回显数据
      if (res) {
        this.ruleForm.scoreItem = res.scoreItem || []
      } else {
        // 可评价 重置
        this.ruleForm.scoreItem = this.questionList.map(v => {
          return {
            question: v.name,
            score: 0
          }
        })
      }
      this.initData(id)
      console.log(this.scoreDetail)
    },
    initData(id) {
      if (!id) return
      this.loading = true
      this.request.page({
        ...this.getQueryParams(),
        subId: id
      }).then(res => {
        this.loading = false
        this.totalSize = res.total
        this.tableData = res.list
      })
    },
    handleSubmit() {
      this.$refs.formRef.validate(valid => {
        if (valid) {
          http_serve_sub_app_evaluate.create({
            subId: this.subDetail.id
          }, {
            ...this.ruleForm,
            name: this.subDetail.name,
            score: this.computeScore
          }).then(res => {
            this.$emit('save')
            this.handleClose()
          })
        }
      })
    },
    handleClose() {
      this.drawer = false
      if (this.$refs.formRef) {
        this.$refs.formRef.clearValidate()
      }
    }
  }
}
</script>

<style lang="scss">
.upload-demo2 {
  .el-upload,
  .el-upload-dragger{
    width: 100%;
  }
}
</style>
